<template>
	<view class="feedback-page">
		<view class="base-label-item">
			<view class="base-label">反馈类型：</view>
			<uni-data-checkbox v-model="type" :localdata="types" @change="onChangeType" selectedColor="#2bc888" selectedTextColor="#2bc888"></uni-data-checkbox>
		</view>
		<view class="base-label-item">
			<view class="base-label">手机号：</view>
			<input type="number"  class="phone-input" placeholder="请输入手机号" v-model="phone" maxlength="11" />
		</view>
		<view class="base-label-item">
			<view class="base-label">问题反馈<text class="required">*</text></view>
			<textarea
				class="phone-textarea"
				placeholder="请输入反馈问题"
				v-model="message"
				placeholder-class="placeholder"
			/>
		</view>
	<!-- 	<uni-easyinput class="phone-input" styles="width:80%; margin: 20px 0" clearable color="#000" trim="all"	borderColor="#2bc888" type="number" maxlength="11" label="联系方式"  placeholder="请输入手机号" :value="phone" @change="change" />
		<uni-easyinput class="phone-textarea" styles="width:80%; margin: 20px 0" clearable	 color="#000" trim="all" borderColor="#2bc888"  type="textarea" autoHeight :value="message" label="问题反馈" placeholder="请输入反馈问题"
			@change="changeMsg" /> -->
			
		<view class="logout">
			<button class="submit" @click="submit">提交</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import { mineServer } from '@/common/index'
	const phone = ref('')
	const message = ref('');
	const errMsg = ref(null);
	
	const types = ref([
		{
			value: '1',
			text:'遇到问题'
		},
		{
			value: '2',
			text:'使用建议'
		}
	])
	const changeMsg = ({ detail }) => {
		message.value = detail;
	}
	const type = ref("1")
	
	const onChangeType = ({detail}) => {
		type.value = detail.value
	}
	const onClick = (e) => {
		console.log(e)
	}
	const inputPhone = ({ detail }) => {
		phone.value = detail;
	}
	const change = ({ detail }) => {
		const regExpPhone = new RegExp(/^1[3-9]\d{9}$/);
		if (regExpPhone.test(detail)) {
			errMsg.value = null;

		} else {
			errMsg.value = "手机号不正确"
		}
	}
	const submit = async () => {
		console.log('提交的信息', phone.value, message.value, type.value)
		
		
		if (phone.value === '') {
			errMsg.value = "'请输入手机号'"
			uni.showToast({
				title:'请输入手机号',
				icon:"none"
			})
			return
		}
		if(phone.value){
			const regExpPhone = new RegExp(/^1[3-9]\d{9}$/);
			if(!regExpPhone.test(phone.value)){
				uni.showToast({
					title:'手机号不对',
					icon:"none"
				})
				return;
			}
		}
		if (message.value === '') {
			uni.showToast({
				title:'请输入反馈内容',
				icon:"none"
			})
			return;
		}
		
		feedbacks();
	}


	// 意见反馈
	const feedbacks = async () => {
		try {
			const { status, data } = await mineServer.feedbacks({ contactInformation: phone.value, content: message.value || '', type: type.value });
			if (status === '200') {
				uni.showToast({
					icon: "success",
					title: "感谢您的反馈",
					success() {
						uni.navigateBack()
					}
				})
			}
		} catch (e) {
			console.log(e)
			//TODO handle the exception
		}
	}
</script>

<style lang="scss">
.feedback-page {
  padding: 32rpx;
  min-height: 100vh;
  background-color: #ffffff;

  .base-label-item {
    margin-bottom: 40rpx;
    
    .base-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;

      .required {
        color: #ff4d4f;
        margin-left: 4rpx;
      }
    }

    // 单选框组样式优化
    :deep(.uni-data-checklist) {
      .checklist-group {
        .checklist-box {
          margin-right: 40rpx;
          padding: 6rpx 0;
        }
      }
    }
  }

  .phone-input {
    width: calc(100% - 48rpx); // 减去padding值
    height: 88rpx;
    border: none;
    border-bottom: 2rpx solid #eee;
    font-size: 28rpx;
    background-color: #fff;
    transition: all 0.3s;
    
    &:focus {
      border-bottom-color: #2BC888;
    }
  }

  .phone-textarea {
    width: 100%;
    min-height: 200rpx;
    border: 2rpx solid #eee;
    border-radius: 16rpx;
    padding: 24rpx;
    font-size: 28rpx;
    background-color: #fafafa;
    margin-top: 12rpx;
    transition: all 0.3s;
    box-sizing: border-box;
    
    &:focus {
      border-color: #2BC888;
      background-color: #fff;
    }
  }

  .placeholder {
    font-size: 28rpx;
    color: #999;
  }

  .logout {
    width: 100%;
    padding: 0 32rpx;
    position: fixed;
    bottom: 50rpx;
    left: 0;
    box-sizing: border-box;

    .submit {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background-color: #2BC888;
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;
      border: none;
      transition: all 0.2s ease;
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style>